<template>
	<view class="dish-create-card ot2">
		<view class="image-uploader">
			<image
				class="upload-icon"
				src="../../static/icons/image.svg"
				mode="aspectFill"
			></image>
		</view>

		<view class="dish-detail">
			<uni-easyinput
				class="dish-name"
				v-model="name"
				focus
				placeholder="菜名"
			/>

			<view class="dish-type">
				{{ type }}
			</view>

			<uni-easyinput
				class="dish-create-card-dish-desc"
				v-model="description"
				type="textarea"
				placeholder="简介"
			></uni-easyinput>
		</view>
	</view>
</template>

<script>
export default {
	name: 'DishCreateCard',
	props: {
		label: { type: String, default: '名称' },
		type: { type: String, default: '分类' },
	},
	data() {
		return {
			imageUrl: '',
			name: '',
			description: '',
		};
	},
};
</script>

<style scoped>
.dish-create-card {
	display: flex;
}

.image-uploader {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 300rpx;
	height: 300rpx;
	background: #e5e5e5;
}
.upload-icon {
	width: 50rpx;
	height: 50rpx;
}

.dish-detail {
	box-sizing: border-box;
	flex: 1;
	padding: 16rpx 24rpx;
}

.dish-desc {
}
</style>

<style>
.uni-easyinput__content-textarea {
	position: relative;
	overflow: hidden;
	flex: 1;
	line-height: 1.5;
	font-size: 14px;
	padding-top: 6px;
	padding-bottom: 10px;
	height: 40px;
	/* #ifndef APP-NVUE */
	min-height: 40px;
	width: auto;
	/* #endif */
}
</style>
